<template>
  <view class="hot-container">

    <view v-for="(item, index) in tabData" :key="index">
      {{ item.label }} - {{ index }}
    </view>
  </view>
</template>

<script>
/**
 * 1.从vuex导入mapActions处理Actions中的函数
 * 2.如果函数在mutations就从vuex导入mapMutations
 * 3.如果函数在State就从vuex导入mapState
 */
// 1. 导入 mapState 函数
// 2. 导入mapMutations 函数，处理mutation的问题
import {mapState, mapMutations} from 'vuex';
import {getHotTabs} from 'api/hot';

export default {
  data() {
    return {
      tabData: [],
    };
  },
  // 组件实例配置完成，但是DOM尚未渲染，进行网络请求，配置响应数据
  created() {
    this.loadHotTabs();
  },
  methods: {
    // 利用 mapMutations函数，可以直接把vuex中的mutation合并到当前组件的methods中，合并之后，
    // 使用mutation就像使用methods中的方法一样
    ...mapMutations('search', ['removeSearchData', 'removeAllSearchData']),

    // 删除所有数据
    onDelAllClick() {
      this.removeAllSearchData();
    },
    //  删除指定数据 index角标
    onClearAll(item, index) {
      this.removeSearchData(index);
    },
    /**
     * 获取热搜标题数据
     */
    async loadHotTabs() {
      // uniapp 支持 async await
      const res = await getHotTabs();
      this.tabData = res.content;
      console.log('res', res.content);
    },
  },
  computed: {
    // 2. 在 computed 中，通过 mapState 函数，注册 state 中的数据，导入之后的数据可直接使用（就像使用 data 中的数据一样）
    // mapState(模块名, ['字段名','字段名','字段名'])
    ...mapState('search', ['searchData']),
  },
};
</script>

<style lang="scss"></style>
